<template>
  <div class="maskCenter">
    <div :class="windowShow ? 'systemDialog' : 'systemDialog-hide'">
      <div class="dialog-header" v-winmove>
        <span>信息详情</span>
        <el-tooltip
          class="item"
          effect="dark"
          content="关闭"
          placement="top-start"
        >
          <span
            class="icon iconfont iconbiaoqianlan-guanbi"
            @click="close"
          ></span>
        </el-tooltip>
      </div>
      <div class="dialog-body">
        <el-form
          class="systemForm"
          ref="form"
          :model="form"
          label-width="75px"
          size="mini"
        >
          <el-form-item label="接收人:">
            <div class="accept-content">
              <el-input
                v-model="form.accept"
                class="systemInput"
                readonly
                :disabled="isbrower"
              ></el-input>
              <i
                :class="[
                  !isbrower ? 'el-icon-more border' : 'el-icon-more  disable',
                ]"
                @click="selectAccept"
              ></i>
            </div>
          </el-form-item>
          <el-form-item label="重要程度:" disabled>
            <el-select
              v-model="form.grade"
              placeholder="请选择"
              style="width: 362px"
              :disabled="isbrower"
              class="systemInput"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value.toString()"
                :label="item.label"
                :value="item.value.toString()"
                style="width: 362px"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="消息主题:">
            <el-input
              v-model="form.title"
              class="systemInput"
              style="width: 362px"
              :disabled="isbrower"
            ></el-input>
          </el-form-item>
          <el-form-item label="信使详情:">
            <el-input
              type="textarea"
              resize="none"
              style="width: 362px"
              :disabled="isbrower"
              v-model="form.detail"
              :maxlength="txtVal"
              show-word-limit
              class="systemInput"
            ></el-input>
          </el-form-item>
        </el-form>
        <div style="width: 100%; text-align: left; padding-left: 75px">
          <el-checkbox
            systemCheckbox
            v-model="isSms"
            @change="changeSms"
            :disabled="isbrower"
            >短信</el-checkbox
          >
        </div>
      </div>
      <div class="dialog-footer right">
        <span
          :class="[
            !isbrower
              ? 'systemButtonConfirm'
              : ' systemButtonConfirm systemButtonDisabled',
          ]"
          @click="send"
          >发送</span
        >
        <span
          :class="[
            !isbrower
              ? 'systemButtonConfirm'
              : ' systemButtonConfirm systemButtonDisabled',
          ]"
          @click="save"
          >保存</span
        >
      </div>
    </div>
    <organizationTree
      style=""
      v-if="showRole"
      :type="2"
      :searchBoxShow="1"
      :dialogShow="1"
      :checkBoxShow="1"
      @treeCancel="hide"
      @getCheckedRoles="getRole"
      dialogTitle="人员选择"
      :propsParam="param"
    ></organizationTree>
  </div>
</template>


<script>
import winmove from "@/directives/winmove";
import organizationTree from "../organizationTree.vue";
import { addSend, updateSend, sendDetail, send } from "@/system/api/message";
export default {
  name: "messagerDetail",
  directives: {
    winmove,
  },
  components: {
    organizationTree,
  },
  props: {
    // 详情id,由list传入
    detailId: {
      default: "",
    },
    isbrower: {
      default: false,
    },
    dataForm: {},
    isReceive: {
      default: false,
    },
  },
  data() {
    return {
      param: {
        userFlag: true,
        parentId: 0,
      },
      txtVal: 128,
      showRole: false,
      typeOptions: [
        {
          value: 2,
          label: "紧急",
        },
        {
          value: 1,
          label: "重要",
        },
        {
          value: 0,
          label: "一般",
        },
      ],
      windowShow: true,
      isSms: false,
      form: {
        id: "",
        accept: "",
        time: "",
        title: "",
        grade: "",
        detail: "",
        from: "",
        acceptId: "",
        fromId: "",
        isSms: 0,
        type: 0,
      },
    };
  },
  methods: {
    changeSms(e) {
      if (e) {
        this.isSms = true;
      } else {
        this.isSms = false;
      }
      this.form.isSms = Number(this.isSms);
    },
    // 加载详情表单方法
    load: function (e) {
      if (e) {
        sendDetail({
          id: e,
        }).then((res) => {
          if (res.code == "200") {
            this.form = res.info;
            this.isSms = Boolean(this.form.isSms);
          }
        });
      } else {
        this.form.id = "";
        this.form.accept = "";
        this.form.time = "";
        this.form.grade = "";
        this.form.title = "";
        this.form.detail = "";
        this.form.acceptId = "";
        this.isSms = false;
      }
    },
    close() {
      this.windowShow = false;
      setTimeout(() => {
        this.$emit("hide");
        if (!this.isbrower) {
          this.$emit("query");
        }
      }, 400);
    },
    save() {
      if (this.isbrower) {
        return;
      }
      if (this.txtVal > 129) {
        this.message("信使内容不能超过128个字节！", 3);
        return false;
      }
      if (!this.form.grade) {
        this.form.grade = "0";
      }
      if (this.form.id) {
        console.log(this.form);
        updateSend(this.form).then((res) => {
          if (res.code == "200") {
            this.message("保存成功", 1);
          }
        });
        this.close();
      } else {
        addSend(this.form).then((res) => {
          if (res.code == "200") {
            this.message("保存成功", 1);
          }
        });
        this.close();
      }
    },
    send() {
      if (!this.isbrower) {
        var postdata = this.form;
        if (!this.form.accept) {
          this.message("请选择接收人！", 3);
          return false;
        }
        if (!this.form.detail) {
          this.message("请填写信使内容！", 3);
          return false;
        }
        if (this.txtVal > 129) {
          this.message("信使内容不能超过128个字节！", 3);
          return false;
        }
        send(postdata).then((res) => {
          if (res.code == "200") {
            this.message("发送成功", 1);
            this.close();
          }
        });
      } else {
        return;
      }
    },
    selectAccept() {
      if (!this.isbrower) {
        this.showRole = true;
      } else {
        return;
      }
    },
    hide() {
      this.showRole = false;
    },
    getRole(nodes) {
      var arrAcceptIds = [];
      var arrAcceptNames = [];
      this.comtree = false;
      Object.keys(nodes).forEach(function (i) {
        arrAcceptIds.push(nodes[i].id);
        arrAcceptNames.push(nodes[i].name);
      });
      var acceptIds = arrAcceptIds.join(",");
      var accepts = arrAcceptNames.join(",");
      this.form.accept = accepts;
      this.form.acceptId = acceptIds;
      this.showRole = false;
    },
  },
  created: function () {},
  mounted: function () {
    if (!this.isReceive) {
      this.load(this.detailId);
    } else {
      console.log(this.dataForm)
      this.form = this.dataForm;
      this.form.grade = this.form.grade.toString();
    }
    console.log(this.dataForm)
  },
};
</script>

<style scoped>
/deep/.organizationTree-wrapper.dialog-wrapper.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.systemDialog {
  width: 473px;
  height: 508px;
}

.systemDialog-hide {
  width: 473px;
  height: 508px;
}

.systemForm .el-form-item--mini.el-form-item {
  margin-left: 0px;
  padding-right: 13px;
}

.systemForm .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 16px;
}

.systemForm .el-input--mini.el-input__inner {
  width: 326px !important;
}

.header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  background: var(--win-head-back-color);
  margin: 4px;
  text-align: left;
}

.header .iconfont {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  margin: 0px 9px 0px 0;
  cursor: pointer;
}

.header .title {
  width: 64px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  margin-left: 12px;
}

.message-content {
  margin: 20px 13px 0 20px;
  height: calc(100% - 132px);
  display: flex;
  flex-direction: row;
}

.systemForm {
  height: calc(100% - 32px);
  width: 100%;
}

.message-name {
  height: 16px;
  line-height: 16px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin: 16px;
  text-align: left;
}

.message-name .myForm .el-input--mini .el-input__inner {
  height: 32px;
  line-height: 32px;
  border: 1px solid var(--input-border-color);
  box-shadow: 0px 10px 20px 0px rgba(204, 204, 204, 0.1),
    0px -10px 20px 0px rgba(204, 204, 204, 0.1);
  border-radius: 4px;
}

.systemForm /deep/.el-textarea__inner {
  height: 200px;
}

.footer {
  padding-right: 13px;
  height: 68px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-top: 20px;
}

.accept-content {
  display: flex;
  flex-direction: row;
  width: 362px;
}

.border {
  margin-left: 8px;
  margin-top: 3px;
  display: inline-block;
  border-radius: 4px;
  background: rgba(244, 246, 249, 0);
  border: 1px solid var(--button-border-color);
  width: 40px;
  height: 28px;
  line-height: 28px;
  color: var(--icon-color);
}

.border:hover {
  background: rgba(244, 246, 249, 1);
  border: 1px solid var(--input-focus-border-color);
  cursor: pointer;
}

.border:active {
  border: 1px solid var(--input-focus-border-color);
  cursor: pointer;
}

.btnDisabled {
  width: 68px;
  height: 28px;
  line-height: 26px;
  border: 1px solid var(--button-border-color);
  box-shadow: 0px 3px 6px 0px rgba(0, 57, 151, 0.1);
  border-radius: 4px;
  color: var(--checkBox-disable-back-color);
}

.disable {
  margin-left: 4px;
  margin-top: 3px;
  display: inline-block;
  border-radius: 4px;
  background: rgba(244, 246, 249, 0);
  border: 1px solid var(--button-border-color);
  width: 40px;
  height: 28px;
  line-height: 28px;
  color: var(--checkBox-disable-back-color);
}
</style>
<style>
.el-textarea .el-input__count {
  background: none;
}
</style>
